<!--
@Author: 魏巍 <jswei>
@Date:   2018-08-10T21:52:21+08:00
@Email:  524314430@qq.com
@Filename: header.vue
@Last modified by:   jswei
@Last modified time: 2018-08-28T04:31:58+08:00
@Copyright: free
-->

<template>
  <div class="header">
      <mt-header :title="title" :fixed="isFixed" class="wt-header">
        <div class="mt-solt-left" slot="left" v-if="isLeft">
          <mt-button :icon="leftIcon" @click="goback">{{leftText}}</mt-button>
        </div>
        <div class="mt-solt-right" slot="right" v-if="isRight">
          <mt-button :icon="rightIcon" @click="doRight">{{rightText}}</mt-button>
        </div>
    </mt-header>
  </div>
</template>

<script>
import { Header } from "mint-ui";
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    backHandler: {
      type: Function,
      default: null
    },
    isFixed: {
      type: Boolean,
      default: true
    },
    isLeft: {
      type: Boolean,
      default: false
    },
    leftText: {
      type: String,
      default: '返回'
    },
    leftIcon:{
      type: String,
      default: 'back'
    },
    isRight: {
      type: Boolean,
      default: true
    },
    rightHandler: {
      type: Function,
      default: null
    },
    rightIcon: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    }
  },
  created() {
    //console.log(this.backHandler)
  },
  components: {
    Header
  },
  methods: {
    goback() {
      this.backHandler ? this.backHandler() : this.$router.back();
    },
    doRight() {
      this.rightHandler
        ? this.rightHandler()
        : () => {
            this.$emit("right", this.$refs.header);
          };
    }
  }
};
</script>

<style lang="scss" scoped>
  .wt-header{
    height: 3.5rem;
    font-size: 1.3rem;
  }
</style>
